<template>
  <div class="operationLog">
    <!-- 操作日志列表 -->
    <!-- 搜索部分 -->
    <div class="search">
      <el-input
        v-model="search"
        size="mini"
        placeholder="输入操作人/模块/说明"
        style="width: 250px"
        clearable
        @keyup.enter.native="handleSearch"
      ></el-input>
      <el-button
        size="mini"
        type="primary"
        @click="handleSearch"
        style="padding: 8px 20px;margin: 0 10px;border: none;color: #626366;background-color: #f1f1f1"
      >搜索</el-button>
    </div>
    <div class="filtrate">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item label="操作日期">
          <div class="block">
            <el-date-picker
              v-model="form.log_operatetime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="mini"
              style="margin-left: 12px"
              @change="handleChangeRegister"
            ></el-date-picker>
            <el-button type="primary" size="mini" @click="handleFiltrate(form)">筛选</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格部分 -->
    <div class="tableData">
      <el-table style="width: 100%;margin-bottom: 40px" :data="tableData">
        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
        <el-table-column align="center" label="操作人姓名" prop="sv_d_user_name"></el-table-column>
        <el-table-column align="center" label="操作模块" prop="log_operatemok"></el-table-column>
        <el-table-column align="center" label="操作说明" prop="log_operatemdec">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div
                slot="content"
                style="max-width: 330px;line-height: 20px"
                v-html="scope.row.operateDetail"
              ></div>
              <div>{{ scope.row.log_operatemdec }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="160" label="操作时间" prop="log_operatetime"></el-table-column>
      </el-table>
    </div>
    <!-- 这个是分页器 -->
    <Pagination
      :total="total"
      :pageIndex="pageIndex"
      :pageSize="pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></Pagination>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { mapState } from "vuex"; //注册state
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      operateDetail: "",
      search: "",
      // 查询的数据
      form: {
        log_operatetime: "",
        start: "", // 注册开始时间
        end: "" // 注册结束时间
      },
      // 分页器的数据
      total: 0, // 总条数
      pageIndex: 1, // 当前页
      pageSize: 10, // 每页数量
      // 身份令牌
      myToken: ""
    };
  },
  components: { Pagination },
  computed: {
    // 引入权限页面
    ...mapState(["usertype"])
  },
  methods: {
    // 获取订单数据的方法
    getOrderData() {
      this.$api
        .getLogList(
          this.pageIndex,
          this.pageSize,
          this.search,
          this.form.start,
          this.form.end,
          this.myToken
        )
        .then(res => {
          if (res.succeed) {
            const { dataList, total } = res.values;
            this.total = total;
            if (dataList) {
              this.tableData = dataList.map((v, i) => {
                // 处理操作细节
                let operatedata = JSON.parse(v.log_operatedata);
                let detailStr = "";
                if (operatedata) {
                  if (operatedata.length >= 1) {
                    operatedata.forEach(item => {
                      if (item.after) {
                        detailStr += `<span>${item.name}：${item.before}——>${item.after}<br /></span>`;
                      }
                    });
                  }
                }
                // 格式化注册时间
                v.log_operatetime = new Date(v.log_operatetime).Format(
                  "yyyy-MM-dd hh:mm:ss"
                );
                return {
                  ...v,
                  operateDetail: detailStr || "无其他操作" // 监听详细操作内容
                };
              });
            }
          }
        });
    },
    // 格式化注册时间
    handleChangeRegister(val) {
      if (val != null) {
        this.form.start = new Date(val[0]).Format("yyyy-MM-dd hh:mm:ss");
        this.form.end = new Date(val[1]).Format("yyyy-MM-dd hh:mm:ss");
      } else {
        this.form.start = "";
        this.form.end = "";
      }
    },
    // 搜索的方法
    handleSearch() {
      this.pageIndex = 1;
      this.getOrderData();
    },
    // 进行筛选
    handleFiltrate(val) {
      this.form = val;
      this.pageIndex = 1;
      this.getOrderData();
    },
    // 分页器的方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOrderData();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getOrderData();
    },
    // 筛选的方法
    handleFiltrate() {
      this.pageIndex = 1;
      this.getOrderData();
    }
  },
  created() {
    if (this.usertype == 1) {
      this.$message({
        type: "warning",
        message: "您没有操作权限"
      });
      this.$router.push("/admin/index");
    }
  },
  mounted() {
    // 获取令牌
    this.myToken = sessionStorage.getItem("myToken");
    // 获取订单列表,初始化列表
    this.getOrderData();
    // 格式化时间
    this.timeFormatting = this.utils.timeFormatting();
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.operationLog {
  background-color: #fff;
  padding: 20px;
  .search {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .filtrate {
    padding: 5px 10px;
    background-color: #f1f1f1;
    margin-bottom: 20px;
    .el-radio-button {
      margin-right: 10px;
    }
    .block {
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  // 表格表头
  .tableData @{deep} .el-table th {
    background-color: #fafafa;
    color: #252525;
    font-weight: 100;
  }
  // 弹出框的样式
  .recallDetail {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    .content {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
    }
    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      color: #666;
      font-size: 20px;
    }
  }
  // 筛选每一项
  .filtrate @{deep} .el-form-item {
    margin-bottom: 0;
  }
  // 筛选项的标题
  .filtrate @{deep} .el-form-item__label {
    color: #000;
    font-weight: 600;
  }
  // 筛选项的选项
  .filtrate @{deep} .el-radio-button__inner {
    border: 1px solid #f1f1f1;
    background-color: #f1f1f1;
    font-size: 14px;
    color: #626366;
  }
  // 筛选项的选中项
  .filtrate @{deep} .is-active .el-radio-button__inner {
    background-color: #f1f1f1;
    border: 1px solid #66b1ff;
    box-shadow: unset;
    color: #666;
    border-radius: 4px;
  }
}
.operateDetail {
  background-color: #303133;
  color: fff;
  .popper__arrow {
    background-color: inherit;
  }
}
</style>